<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简易版手风琴</title>
		<link rel="stylesheet" href="./css/reset.css">
	</head>
	<body>
		<style>
			*{
				box-sizing: border-box;
				padding: 0px;
			}

		
			/* 请根据结构实现相应css功能,先实现鼠标悬停显示对应图片,再提供过渡效果 */

			ul li{
				
				width: 300px;
				border: 1px solid  #808080;
				border-radius: 5px;
				margin: 0 auto;
				overflow: hidden;	
				font-size: 0px;
			}
			
			div
			{
				/* display: none; */
				height: 0px;
				/* transition: property duration timing-function delay; */
				transition: height 1s ease 0.1s;	
			}

			li:hover div {
				height: 137px;
			}
			div img{
				width: 100%;
			}
			h3{
				font-size: 18px;
				line-height: 36px;
				padding-left: 10px;
				background-color: #dadfe7;
			}


		</style>
		<ul>
			<li>
				<h3>上官婉儿</h3>
				<div id=""><img src="img/婉儿.jpg"/></div>
			</li>
			<li>
				<h3>孙尚香</h3>
				<div id=""><img src="img/大小姐.jpg"/></div>
			</li>
			<li>
				<h3>兰陵王</h3>
				<div id=""><img src="img/兰陵王.jpg"/></div>
			</li>
		</ul>

	</body>
</html>
